import { uniqBy } from 'lodash-es';
import styles from './index.less';
import { getEdgeColorConfig } from '../../utils';

export function PlankEdgeLegend(props: { edgeBanding: number[] }) {
  const { edgeBanding } = props;

  const colorConfig = getEdgeColorConfig(edgeBanding);
  // console.log(colorConfig);
  const legends = uniqBy(colorConfig, 'thickness');

  return (
    <div className={styles.legend}>
      {legends.map(({ thickness, color }) => {
        return (
          <div className={styles.item} key={thickness}>
            <div
              className={styles.indicator}
              style={{ borderColor: color }}
            ></div>
            <div className={styles.desc}>{thickness}</div>
          </div>
        );
      })}
    </div>
  );
}
